<!doctype html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Web Starter Kit</title>

    <!-- Add to homescreen -->
    <link rel="manifest" href="manifest.json">

    <!-- Fallback to homescreen for Chrome <39 on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="Web Starter Kit">
    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Web Starter Kit">
    <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
    <meta name="msapplication-TileColor" content="#3372DF">

    <meta name="theme-color" content="#3372DF">

    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
    <!--
    <link rel="canonical" href="http://www.example.com/">
    -->

    <!-- Page styles -->
    <link rel="stylesheet" href="components/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="components/swiper/dist/css/swiper.min.css"/>
    <style>
      .swiper-slide {
        height: 200px;
      }
    </style>
  </head>
  <body>
    <nav>
      <div class="navbar">
        <div class="navbar-inner">
          <div class="logo">
            <img src="images/5u-logo.png" alt=""/>
          </div>
        </div>
      </div>
    </nav>
    <div class="view">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <!--<div class="swiper-button-prev"></div>-->
        <!--<div class="swiper-button-next"></div>-->

        <!-- 如果需要滚动条 -->
        <!--<div class="swiper-scrollbar"></div>-->
      </div>
      <div class="tab-block-btn-group">
        <a class="btn active" href="javascript:;" data-tab-target="1">热点</a>
        <a class="btn" href="javascript:;" data-tab-target="2">关注</a>
      </div>
      <ul class="list" data-tab-index="1">
        <li>
          <div class="author-info">
            <div class="author-thumb">
              <img src="images/demo/002.png" alt="#"/>
            </div>
            <div class="author-desc">
              <div class="name">我的名字奶人我</div>
              <p><span class="time">3分钟前</span><span>来自</span><span>梅西球迷会</span></p>
            </div>
          </div>
          <div class="article">
            <div class="article-title">
              <h3 class="article-badge ding">恒大的高拉特和鲁能的问题一样?</h3>
            </div>
            <div class="article-images">
              <a href="#"><img src="images/demo/001.png" alt="#"/></a>
              <a href="#"><img src="images/demo/001.png" alt="#"/></a>
              <a href="#"><img src="images/demo/001.png" alt="#"/></a>
            </div>
          </div>
          <div class="badge"><i class="fa fa-star"></i>+5</div>
        </li>
        <li>
          <div class="author-info">
            <div class="author-thumb">
              <img src="images/demo/002.png" alt="#"/>
            </div>
            <div class="author-desc">
              <div class="name">我的名字奶人我</div>
              <p><span class="time">3分钟前</span><span>来自</span><span>梅西球迷会</span></p>
            </div>
          </div>
          <div class="article">
            <div class="article-title">
              <h3 class="article-badge jing">恒大的高拉特和鲁能的问题一样?</h3>
            </div>
            <div class="article-images">
              <a href="#"><img src="images/demo/001.png" alt="#"/></a>
              <a href="#"><img src="images/demo/001.png" alt="#"/></a>
              <a href="#"><img src="images/demo/001.png" alt="#"/></a>
            </div>
          </div>
        </li>
        <li>
          <div class="author-info">
            <div class="author-thumb">
              <img src="images/demo/002.png" alt="#"/>
            </div>
            <div class="author-desc">
              <div class="name">我的名字奶人我</div>
              <p><span class="time">3分钟前</span><span>来自</span><span>梅西球迷会</span></p>
            </div>
          </div>
          <div class="article">
            <div class="article-title">
              <h3><span class="article-badge-ding">顶</span>恒大的高拉特和鲁能的问题一样?</h3>
            </div>
            <div class="article-images">
              <a href="#"><img src="images/demo/001.png" alt="#"/></a>
              <a href="#"><img src="images/demo/001.png" alt="#"/></a>
              <a href="#"><img src="images/demo/001.png" alt="#"/></a>
            </div>
          </div>
        </li>
      </ul>
      <ul class="list" data-tab-index="2" style="display: none;">
        <li>
          <div class="author-info">
            <div class="author-thumb">
              <img src="images/demo/002.png" alt="#"/>
            </div>
            <div class="author-desc">
              <div class="name">我的名字奶人我</div>
              <p><span class="time">3分钟前</span><span>来自</span><span>梅西球迷会</span></p>
            </div>
          </div>
          <div class="article">
            <div class="article-title">
              <h3 class="article-badge ding">恒大的高拉特和鲁能的问题一样?</h3>
            </div>
            <div class="article-images">
              <a href="#"><img src="images/demo/001.png" alt="#"/></a>
              <a href="#"><img src="images/demo/001.png" alt="#"/></a>
              <a href="#"><img src="images/demo/001.png" alt="#"/></a>
            </div>
          </div>
          <div class="badge"><i class="fa fa-star"></i>+5</div>
        </li>
      </ul>
      <div class="load-more-block">加载更多</div>
    </div>
    <div class="toolbar">
      <a href="#" class="item active square"><i class="fa fa-home" style="margin-right: 4px;"></i>广场</a>
      <div class="item search"><i class="fa fa-search"></i></div>
      <a href="#" class="item person"><i class="fa fa-user" style="margin-right: 4px;"></i>个人</a>
    </div>

    <script src="components/zepto/zepto.js"></script>
    <script src="components/fastclick/lib/fastclick.js"></script>
    <script src="components/swiper/dist/js/swiper.js"></script>
    <script>
      Zepto(function ($) {
        FastClick.attach(document.body);

        // tab事件
        $(".tab-block-btn-group .btn").each(function () {
          var me = $(this);
          me.on("click", function () {
            if (!me.hasClass("active")) {
              me.siblings(".active").removeClass("active");
              me.addClass("active");

              $("[data-tab-index]").hide();
              $("[data-tab-index='" + me.attr("data-tab-target") + "']").show();
            }
          });
        });

        // load more事件
        $(".load-more-block").on("click", function () {

        });

        var mySwiper = new Swiper ('.swiper-container', {
          direction: 'horizontal',
          loop: true,

          // 如果需要分页器
          pagination: '.swiper-pagination',

          // 如果需要前进后退按钮
//          nextButton: '.swiper-button-next',
//          prevButton: '.swiper-button-prev',

          // 如果需要滚动条
//          scrollbar: '.swiper-scrollbar',
        })
      });
    </script>
  </body>
</html>
